<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html>
<head>
    <title>商品管理 - 商户端</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="${pageContext.request.contextPath}/logo/favicon.ico">
    <link href="${pageContext.request.contextPath}/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .sidebar {
            min-height: calc(100vh - 56px);
        }
        .table-success {
            background-color: #d1e7dd;
        }
        .table-success:hover {
            background-color: #c3d9d0;
        }
        .btn-success {
            background-color: #198754;
            border-color: #198754;
        }
        .btn-success:hover {
            background-color: #157347;
            border-color: #146c43;
        }
        .image-preview-container {
            position: relative;
            display: inline-block;
            margin: 5px;
        }
        .image-preview-container img {
            width: 100px;
            height: 100px;
            object-fit: cover;
            border-radius: 4px;
        }
        .image-preview-container .delete-btn {
            position: absolute;
            top: -5px;
            right: -5px;
            background-color: #dc3545;
            color: white;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 14px;
            line-height: 1;
        }
        .image-preview-container .delete-btn:hover {
            background-color: #bb2d3b;
        }
        #imagePreview {
            min-height: 50px;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <jsp:include page="../common/header.jsp"/>
    
    <div class="container-fluid">
        <div class="row">
            <jsp:include page="../common/sidebar.jsp"/>
            
            <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
                <div class="pt-3">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h1 class="h2">商品管理</h1>
                        <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#productModal" onclick="openAddModal()">
                            <span>+</span> 新增商品
                        </button>
                    </div>
                    
                    <c:if test="${error != null}">
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            ${error}
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                    </c:if>
                    
                    <!-- 查询表单 -->
                    <div class="card mb-3">
                        <div class="card-body">
                            <form action="${pageContext.request.contextPath}/merchant/product" method="get" class="row g-3">
                                <div class="col-md-4">
                                    <input type="text" class="form-control" name="keyword" placeholder="输入商品名称查询..." value="${keyword}">
                                </div>
                                <div class="col-md-4">
                                    <select class="form-select" name="category">
                                        <option value="">全部分类</option>
                                        <option value="蔬菜" ${category == '蔬菜' ? 'selected' : ''}>蔬菜</option>
                                        <option value="水果" ${category == '水果' ? 'selected' : ''}>水果</option>
                                        <option value="粮食" ${category == '粮食' ? 'selected' : ''}>粮食</option>
                                        <option value="禽蛋" ${category == '禽蛋' ? 'selected' : ''}>禽蛋</option>
                                        <option value="茶叶" ${category == '茶叶' ? 'selected' : ''}>茶叶</option>
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <button type="submit" class="btn btn-success me-2">查询</button>
                                    <a href="${pageContext.request.contextPath}/merchant/product" class="btn btn-outline-secondary">重置</a>
                                </div>
                            </form>
                        </div>
                    </div>
                    
                    <!-- 商品表格 -->
                    <div class="card">
                        <div class="card-body">
                            <div class="mb-3">
                                <button type="button" class="btn btn-danger" id="batchDeleteBtn" onclick="batchDelete()" disabled>批量删除</button>
                                <span class="ms-2 text-muted">已选择 <span id="selectedCount">0</span> 项</span>
                            </div>
                            <div class="table-responsive">
                                <table class="table table-hover">
                                    <thead class="table-success">
                                        <tr>
                                            <th width="50">
                                                <input type="checkbox" id="selectAll" onchange="toggleSelectAll()">
                                            </th>
                                            <th>ID</th>
                                            <th>商品图片</th>
                                            <th>商品名称</th>
                                            <th>分类</th>
                                            <th>价格</th>
                                            <th>库存</th>
                                            <th>状态</th>
                                            <th>创建时间</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <c:choose>
                                            <c:when test="${products != null && !empty products}">
                                                <c:forEach var="product" items="${products}">
                                                    <tr>
                                                        <td>
                                                            <input type="checkbox" class="row-checkbox" value="${product.productId}" onchange="updateSelectedCount()">
                                                        </td>
                                                        <td>${product.productId}</td>
                                                        <td>
                                                            <c:if test="${product.imageUrl != null && !empty product.imageUrl}">
                                                                <img src="${product.imageUrl}" alt="商品图片" style="width: 50px; height: 50px; object-fit: cover;">
                                                            </c:if>
                                                            <c:if test="${product.imageUrl == null || empty product.imageUrl}">
                                                                <span class="text-muted">无图片</span>
                                                            </c:if>
                                                        </td>
                                                        <td>${product.productName}</td>
                                                        <td>${product.category != null ? product.category : '-'}</td>
                                                        <td>¥<fmt:formatNumber value="${product.price}" pattern="#,##0.00"/></td>
                                                        <td>${product.stock}</td>
                                                        <td>
                                                            <c:choose>
                                                                <c:when test="${product.status == 1}">
                                                                    <span class="badge bg-success">上架</span>
                                                                </c:when>
                                                                <c:when test="${product.status == 0}">
                                                                    <span class="badge bg-secondary">下架</span>
                                                                </c:when>
                                                                <c:otherwise>
                                                                    <span class="badge bg-danger">已删除</span>
                                                                </c:otherwise>
                                                            </c:choose>
                                                        </td>
                                                        <td><fmt:formatDate value="${product.createTime}" pattern="yyyy-MM-dd HH:mm"/></td>
                                                        <td>
                                                            <button type="button" class="btn btn-sm btn-primary" 
                                                                    data-product-id="${product.productId}"
                                                                    data-product-name="${fn:escapeXml(product.productName)}"
                                                                    data-category="${product.category != null ? fn:escapeXml(product.category) : ''}"
                                                                    data-description="${product.description != null ? fn:escapeXml(product.description) : ''}"
                                                                    data-price="${product.price}"
                                                                    data-stock="${product.stock}"
                                                                    data-image-url="${product.imageUrl != null ? fn:escapeXml(product.imageUrl) : ''}"
                                                                    data-status="${product.status}"
                                                                    onclick="openEditModalFromButton(this)">修改</button>
                                                            <button type="button" class="btn btn-sm btn-danger" 
                                                                    data-product-id="${product.productId}"
                                                                    onclick="deleteProductFromButton(this)">删除</button>
                                                        </td>
                                                    </tr>
                                                </c:forEach>
                                            </c:when>
                                            <c:otherwise>
                                                <tr>
                                                    <td colspan="10" class="text-center text-muted">暂无商品数据</td>
                                                </tr>
                                            </c:otherwise>
                                        </c:choose>
                                    </tbody>
                                </table>
                            </div>
                            
                            <!-- 分页 -->
                            <c:if test="${totalPages > 0}">
                                <nav aria-label="商品分页">
                                    <ul class="pagination justify-content-center">
                                        <li class="page-item ${page == 1 ? 'disabled' : ''}">
                                            <a class="page-link" href="${pageContext.request.contextPath}/merchant/product?page=${page - 1}<c:if test='${keyword != null && !empty keyword}'>&keyword=${keyword}</c:if><c:if test='${category != null && !empty category}'>&category=${category}</c:if>">上一页</a>
                                        </li>
                                        <c:forEach var="i" begin="1" end="${totalPages}">
                                            <li class="page-item ${page == i ? 'active' : ''}">
                                                <a class="page-link" href="${pageContext.request.contextPath}/merchant/product?page=${i}<c:if test='${keyword != null && !empty keyword}'>&keyword=${keyword}</c:if><c:if test='${category != null && !empty category}'>&category=${category}</c:if>">${i}</a>
                                            </li>
                                        </c:forEach>
                                        <li class="page-item ${page == totalPages ? 'disabled' : ''}">
                                            <a class="page-link" href="${pageContext.request.contextPath}/merchant/product?page=${page + 1}<c:if test='${keyword != null && !empty keyword}'>&keyword=${keyword}</c:if><c:if test='${category != null && !empty category}'>&category=${category}</c:if>">下一页</a>
                                        </li>
                                    </ul>
                                </nav>
                                <div class="text-center text-muted">
                                    共 ${totalCount} 条记录，第 ${page}/${totalPages} 页
                                </div>
                            </c:if>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>
    
    <!-- 商品编辑/新增模态框 -->
    <div class="modal fade" id="productModal" tabindex="-1" aria-labelledby="productModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header bg-success text-white">
                    <h5 class="modal-title" id="productModalLabel">新增商品</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="productForm">
                        <input type="hidden" id="productId" name="productId">
                        
                        <div class="mb-3">
                            <label for="productName" class="form-label">商品名称 <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="productName" name="productName" required>
                            <div class="invalid-feedback">请输入商品名称</div>
                        </div>
                        
                        <div class="mb-3">
                            <label for="category" class="form-label">商品分类</label>
                            <select class="form-select" id="category" name="category">
                                <option value="">请选择分类</option>
                                <option value="蔬菜">蔬菜</option>
                                <option value="水果">水果</option>
                                <option value="粮食">粮食</option>
                                <option value="禽蛋">禽蛋</option>
                                <option value="茶叶">茶叶</option>
                            </select>
                        </div>
                        
                        <div class="mb-3">
                            <label for="description" class="form-label">商品描述</label>
                            <textarea class="form-control" id="description" name="description" rows="3"></textarea>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="price" class="form-label">价格 <span class="text-danger">*</span></label>
                                <input type="number" class="form-control" id="price" name="price" step="0.01" min="0" required>
                                <div class="invalid-feedback">请输入有效的价格（大于等于0）</div>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="stock" class="form-label">库存 <span class="text-danger">*</span></label>
                                <input type="number" class="form-control" id="stock" name="stock" min="0" required>
                                <div class="invalid-feedback">请输入有效的库存数量（大于等于0）</div>
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <label for="status" class="form-label">状态</label>
                            <select class="form-select" id="status" name="status">
                                <option value="1">上架</option>
                                <option value="0">下架</option>
                            </select>
                        </div>
                        
                        <div class="mb-3">
                            <label for="productImage" class="form-label">商品图片 <span id="imageRequired" class="text-danger d-none">*</span></label>
                            <input type="file" class="form-control" id="productImage" name="productImage" accept="image/*" onchange="previewImage(this)">
                            <small class="form-text text-muted">支持 JPG、PNG、GIF 格式，最大 5MB</small>
                            <div class="invalid-feedback">修改商品时图片不能为空</div>
                            <input type="hidden" id="imageUrl" name="imageUrl">
                        </div>
                        
                        <div id="imagePreview"></div>
                        
                        <div class="alert alert-danger d-none" id="productError"></div>
                        <div class="alert alert-success d-none" id="productSuccess"></div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-success" id="submitProductBtn" onclick="submitProduct()">保存</button>
                </div>
            </div>
        </div>
    </div>
    
    <script src="${pageContext.request.contextPath}/js/bootstrap.bundle.min.js"></script>
    <script>
        let selectedImageFile = null;
        let productModal = null;
        
        // 初始化模态框
        document.addEventListener('DOMContentLoaded', function() {
            productModal = new bootstrap.Modal(document.getElementById('productModal'));
        });
        
        // 打开新增模态框
        function openAddModal() {
            document.getElementById('productModalLabel').textContent = '新增商品';
            document.getElementById('productForm').reset();
            document.getElementById('productId').value = '';
            document.getElementById('imageUrl').value = '';
            document.getElementById('imagePreview').innerHTML = '';
            selectedImageFile = null;
            
            // 新增商品时，图片不是必填
            document.getElementById('imageRequired').classList.add('d-none');
            
            // 清除错误状态
            document.getElementById('productName').classList.remove('is-invalid');
            document.getElementById('price').classList.remove('is-invalid');
            document.getElementById('stock').classList.remove('is-invalid');
            document.getElementById('productImage').classList.remove('is-invalid');
            
            document.getElementById('productError').classList.add('d-none');
            document.getElementById('productSuccess').classList.add('d-none');
        }
        
        // 打开编辑模态框（从按钮获取数据）
        function openEditModalFromButton(button) {
            const productId = button.getAttribute('data-product-id');
            const productName = button.getAttribute('data-product-name');
            const category = button.getAttribute('data-category');
            const description = button.getAttribute('data-description');
            const price = button.getAttribute('data-price');
            const stock = button.getAttribute('data-stock');
            const imageUrl = button.getAttribute('data-image-url');
            const status = button.getAttribute('data-status');
            openEditModal(productId, productName, category, description, price, stock, imageUrl, status);
        }
        
        // 打开编辑模态框
        function openEditModal(productId, productName, category, description, price, stock, imageUrl, status) {
            document.getElementById('productModalLabel').textContent = '修改商品';
            document.getElementById('productId').value = productId;
            document.getElementById('productName').value = productName;
            document.getElementById('category').value = category || '';
            document.getElementById('description').value = description || '';
            document.getElementById('price').value = price;
            document.getElementById('stock').value = stock;
            document.getElementById('status').value = status;
            document.getElementById('imageUrl').value = imageUrl || '';
            selectedImageFile = null;
            
            // 修改商品时，图片必填
            document.getElementById('imageRequired').classList.remove('d-none');
            
            // 清除错误状态
            document.getElementById('productName').classList.remove('is-invalid');
            document.getElementById('price').classList.remove('is-invalid');
            document.getElementById('stock').classList.remove('is-invalid');
            document.getElementById('productImage').classList.remove('is-invalid');
            
            // 显示现有图片
            const preview = document.getElementById('imagePreview');
            if (imageUrl && imageUrl.trim()) {
                preview.innerHTML = '<div class="image-preview-container"><img src="' + imageUrl + '" alt="商品图片"><span class="delete-btn" onclick="removeImage()">×</span></div>';
            } else {
                preview.innerHTML = '';
            }
            
            document.getElementById('productError').classList.add('d-none');
            document.getElementById('productSuccess').classList.add('d-none');
            productModal.show();
        }
        
        // 预览图片
        function previewImage(input) {
            const preview = document.getElementById('imagePreview');
            
            if (input.files && input.files[0]) {
                const file = input.files[0];
                
                // 检查文件大小
                if (file.size > 5 * 1024 * 1024) {
                    alert('图片大小不能超过5MB');
                    input.value = '';
                    return;
                }
                
                selectedImageFile = file;
                
                const reader = new FileReader();
                reader.onload = function(e) {
                    preview.innerHTML = '<div class="image-preview-container"><img src="' + e.target.result + '" alt="预览图片"><span class="delete-btn" onclick="removeImage()">×</span></div>';
                };
                reader.readAsDataURL(file);
            }
        }
        
        // 删除图片
        function removeImage() {
            document.getElementById('imagePreview').innerHTML = '';
            document.getElementById('productImage').value = '';
            document.getElementById('imageUrl').value = '';
            selectedImageFile = null;
        }
        
        // 提交商品
        function submitProduct() {
            const productId = document.getElementById('productId').value;
            const productName = document.getElementById('productName').value.trim();
            const price = document.getElementById('price').value.trim();
            const stock = document.getElementById('stock').value.trim();
            const imageUrl = document.getElementById('imageUrl').value;
            const imagePreview = document.getElementById('imagePreview');
            
            // 清除之前的错误状态
            document.getElementById('productName').classList.remove('is-invalid');
            document.getElementById('price').classList.remove('is-invalid');
            document.getElementById('stock').classList.remove('is-invalid');
            document.getElementById('productImage').classList.remove('is-invalid');
            
            const errors = [];
            
            // 验证商品名称
            if (!productName) {
                errors.push('商品名称');
                document.getElementById('productName').classList.add('is-invalid');
            } else if (productName.length > 200) {
                errors.push('商品名称（长度不能超过200个字符）');
                document.getElementById('productName').classList.add('is-invalid');
            }
            
            // 验证价格
            if (!price) {
                errors.push('商品价格');
                document.getElementById('price').classList.add('is-invalid');
            } else {
                const priceNum = parseFloat(price);
                if (isNaN(priceNum)) {
                    errors.push('商品价格（格式不正确）');
                    document.getElementById('price').classList.add('is-invalid');
                } else if (priceNum < 0) {
                    errors.push('商品价格（必须大于等于0）');
                    document.getElementById('price').classList.add('is-invalid');
                } else if (priceNum > 999999.99) {
                    errors.push('商品价格（不能超过999999.99）');
                    document.getElementById('price').classList.add('is-invalid');
                }
            }
            
            // 验证库存
            if (!stock) {
                errors.push('库存数量');
                document.getElementById('stock').classList.add('is-invalid');
            } else {
                const stockNum = parseInt(stock);
                if (isNaN(stockNum)) {
                    errors.push('库存数量（格式不正确）');
                    document.getElementById('stock').classList.add('is-invalid');
                } else if (stockNum < 0) {
                    errors.push('库存数量（必须大于等于0）');
                    document.getElementById('stock').classList.add('is-invalid');
                } else if (stockNum > 2147483647) {
                    errors.push('库存数量（数值过大）');
                    document.getElementById('stock').classList.add('is-invalid');
                }
            }
            
            // 验证图片（修改时必须要有图片）
            if (productId) {
                // 修改商品时，必须要有图片
                if (!selectedImageFile && (!imageUrl || imageUrl.trim() === '')) {
                    errors.push('商品图片（修改商品时图片不能为空）');
                    document.getElementById('productImage').classList.add('is-invalid');
                }
            }
            
            // 如果有错误，显示错误信息
            if (errors.length > 0) {
                showError('请检查以下字段：' + errors.join('、'));
                return;
            }
            
            const formData = new FormData();
            formData.append('productName', productName);
            formData.append('category', document.getElementById('category').value);
            formData.append('description', document.getElementById('description').value);
            formData.append('price', price);
            formData.append('stock', stock);
            formData.append('status', document.getElementById('status').value);
            
            if (productId) {
                formData.append('productId', productId);
                formData.append('imageUrl', document.getElementById('imageUrl').value);
            }
            
            // 如果有新选择的图片，添加到FormData
            if (selectedImageFile) {
                formData.append('images', selectedImageFile);
            } else if (!productId) {
                // 新增时如果没有选择图片，使用空字符串
                formData.append('imageUrl', '');
            }
            
            const submitBtn = document.getElementById('submitProductBtn');
            submitBtn.disabled = true;
            submitBtn.textContent = '保存中...';
            
            document.getElementById('productError').classList.add('d-none');
            document.getElementById('productSuccess').classList.add('d-none');
            
            const url = '${pageContext.request.contextPath}/merchant/product';
            formData.append('action', productId ? 'updateAjax' : 'addAjax');
            
            fetch(url, {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    showSuccess(data.message);
                    setTimeout(function() {
                        productModal.hide();
                        location.reload();
                    }, 1500);
                } else {
                    showError(data.message || '操作失败');
                    submitBtn.disabled = false;
                    submitBtn.textContent = '保存';
                }
            })
            .catch(error => {
                console.error('Error:', error);
                showError('操作失败，请重试');
                submitBtn.disabled = false;
                submitBtn.textContent = '保存';
            });
        }
        
        // 删除商品（从按钮获取ID）
        function deleteProductFromButton(button) {
            const productId = button.getAttribute('data-product-id');
            deleteProduct(productId);
        }
        
        // 删除商品
        function deleteProduct(productId) {
            if (!confirm('确定要删除这个商品吗？删除后可以在管理员端恢复。')) {
                return;
            }
            
            const params = new URLSearchParams();
            params.append('action', 'deleteAjax');
            params.append('productId', productId);
            
            fetch('${pageContext.request.contextPath}/merchant/product', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
                },
                body: params.toString()
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert(data.message);
                    location.reload();
                } else {
                    alert(data.message || '删除失败');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('删除失败，请重试');
            });
        }
        
        // 全选/取消全选
        function toggleSelectAll() {
            const selectAll = document.getElementById('selectAll');
            const checkboxes = document.querySelectorAll('.row-checkbox');
            checkboxes.forEach(checkbox => {
                checkbox.checked = selectAll.checked;
            });
            updateSelectedCount();
        }
        
        // 更新选中数量
        function updateSelectedCount() {
            const checkboxes = document.querySelectorAll('.row-checkbox:checked');
            const count = checkboxes.length;
            document.getElementById('selectedCount').textContent = count;
            document.getElementById('batchDeleteBtn').disabled = count === 0;
            
            // 更新全选状态
            const allCheckboxes = document.querySelectorAll('.row-checkbox');
            const selectAll = document.getElementById('selectAll');
            if (allCheckboxes.length === 0) {
                selectAll.checked = false;
                selectAll.indeterminate = false;
            } else if (count === allCheckboxes.length) {
                selectAll.checked = true;
                selectAll.indeterminate = false;
            } else if (count > 0) {
                selectAll.checked = false;
                selectAll.indeterminate = true;
            } else {
                selectAll.checked = false;
                selectAll.indeterminate = false;
            }
        }
        
        // 批量删除
        function batchDelete() {
            const checkboxes = document.querySelectorAll('.row-checkbox:checked');
            if (checkboxes.length === 0) {
                alert('请选择要删除的商品');
                return;
            }
            
            const productIds = Array.from(checkboxes).map(cb => cb.value);
            if (!confirm('确定要删除选中的 ' + productIds.length + ' 个商品吗？删除后可以在管理员端恢复。')) {
                return;
            }
            
            const params = new URLSearchParams();
            params.append('action', 'batchDelete');
            productIds.forEach(id => {
                params.append('productIds[]', id);
            });
            
            const batchDeleteBtn = document.getElementById('batchDeleteBtn');
            batchDeleteBtn.disabled = true;
            batchDeleteBtn.textContent = '删除中...';
            
            fetch('${pageContext.request.contextPath}/merchant/product', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
                },
                body: params.toString()
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert(data.message);
                    location.reload();
                } else {
                    alert(data.message || '删除失败');
                    batchDeleteBtn.disabled = false;
                    batchDeleteBtn.textContent = '批量删除';
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('删除失败，请重试');
                batchDeleteBtn.disabled = false;
                batchDeleteBtn.textContent = '批量删除';
            });
        }
        
        // 初始化选中数量
        document.addEventListener('DOMContentLoaded', function() {
            updateSelectedCount();
        });
        
        function showError(message) {
            const errorDiv = document.getElementById('productError');
            errorDiv.textContent = message;
            errorDiv.classList.remove('d-none');
        }
        
        function showSuccess(message) {
            const successDiv = document.getElementById('productSuccess');
            successDiv.textContent = message;
            successDiv.classList.remove('d-none');
        }
    </script>
</body>
</html>

